var app = function(){
	this.last_local_target = 0; // 上次鼠标悬浮元素
	this.room_id = ''; // 选择的房间id
	this.is_start_game = 0; // 是否开始游戏0否 1是
	/**
	 * 初始化棋盘数据 全为0
	 */
	app.prototype.load_qipan_data = function(){
		var qipan = []
		for(var i = 0; i < 30; i++){
			var temp = []
			for(var j = 0; j < 30; j++){
				temp.push(0)
			}
			qipan.push(temp)
		}
		return qipan
	}
	this.load_qipan_data = this.load_qipan_data();

}
// 实例化操作类 工具类
var util = new Util()
var App = new app()
/**
 * todo 监听棋盘点击
 * @param {Object} e dom
 */
function on_click_qipan(e){
	// 获取x-y轴
	// console.log(e)
	// console.log(e.className) 
	// e.className 格式为 item s-1-28 需要从这串字符中取出1 和 28
	var split_result = e.className.split("-")
	// console.log(split_result)
	var x = split_result[1]
	var y = split_result[2]
	console.log('x:', x, 'y:', y)
}

/**
 * todo 加入房间
 * @param {Object} room_id 房间id
 */
function join_room(room_id){
	var App = new app();
	console.log(room_id)
	App.room_id = room_id
	window.location.href= window.location.href+"?room_id="+room_id
}

// 选择房间 ajax 加载房间列表
function select_room(){
	$("#room .tip").text("正在加载...")
	$("#room").css({'display':'block'})
	util.get_room_list(function(res){
		console.log(res)
		// 获取到房间数据后 写入到房间列表
		var _html = ""
		if(res.data.length > 0){
			$("#room .tip").empty()
			for(var key in res.data){
				_html += "<li>人数 "+res.data[key]['num']+"/2  --"
				+res.data[key]['add_time']+"--"+res.data[key]['name']
				+"  <button onclick='join_room("+res.data[key]['id']+")'>加入房间</button></li>"
			}
		}else{
			_html += "无房间 可自己手动创建"
		}
		
		$("#room ol").html(_html)
	})
}

// 关闭选择房间的div
function close_room_area(){
	$("#room").css({'display':'none'})
}

$(function(){
	// 判断是否进入房间  如果进入房间 则加载游戏模式
	var get_room_id = parseInt(util.getQueryString('room_id'))
	if(get_room_id && typeof get_room_id === 'number'){
		console.log('get_room_id', get_room_id)
		$(".game_option .controller_area").css({'display':'none'})
		// 获取房间详情
		util.get_room_detail(get_room_id, function(res){
			var data = res.data
			// 如果房间不存在  直接返回首页
			if(data == null){
				window.location.href = window.location.origin+window.location.pathname
			}
			console.log('room_detail', data)
			$(".game_option .game_area").css({'display':'block'})
			$(".game_option .game_area .room_id").text(data.id)
			$(".game_option .game_area .room_name").text(data.name)
			$(".game_option .game_area .room_num").text(data.num)
		})
	}
	// 生成棋盘
	gen_qipan()
	// 监听当前鼠标悬浮的元素
	$('div#game .game_qipan .item').mouseover(function(event){
		event.currentTarget.style.background = '#FFFAE8'
		if(App.last_local_target !== 0){
			App.last_local_target.style.background = 'none'
		}
		App.last_local_target = event.currentTarget
	});  
	// 鼠标移出事件
	$('div#game .game_qipan').mouseout(function(event){
		if(App.last_local_target !== 0){
			App.last_local_target.style.background = 'none'
		}
	});
})
// 鼠标点击棋盘事件
$('div#game .game_qipan div').click(function(event){
	console.log(event.currentTarget)
})

// 生成棋盘底部
function gen_qipan(){
	var _html = ""
	for(var j = 0; j < 29; j++){
		for(var i = 0; i < 29; i++){
			_html += "<div class='item s-"+j+"-"+i+"'></div>"
			// _html += "<div class='item s-"+j+"-"+i+"''>"+j+"</div>"
		}
	}
	$("#game").append(_html)
	
	// 生成棋盘
	_html = ""
	for(var j = 0; j < 30; j++){
		for(var i = 0; i < 30; i++){
			_html += "<div onclick='on_click_qipan(this)' class='item s-"+j+"-"+i+"'></div>"
			// _html += "<div class='item s-"+j+"-"+i+"''>"+j+"</div>"
		}
	}
	
	$("#game .game_qipan").append(_html)
}